<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper">
      <a-input :value="value" @change="handleChange" @pressEnter="check" style="width: 80%" />
      <a-icon type="check" class="editable-cell-icon-check" @click="check" />
      <a-icon type="close" class="editable-cell-icon-check" @click="closeIpt" />
    </div>
    <div v-else class="editable-cell-text-wrapper">
      <a-icon type="folder" class="icon-color" theme="filled" v-if="isDir" />
      <a-icon type="file" class="icon-color"  v-else />
      <span style="cursor: pointer" @click="clickFileName(isDir)">{{ value || " " }}</span>
      <a-icon type="edit" class="editable-cell-icon" @click="edit" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'EditableCell',
  props: {
    text: String,
    showEdit: {
      type: Boolean,
      default: true
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    iconName: {
      type: String,
      default: 'file'
    }
  },
  data () {
    return {
      value: this.text,
      editable: this.isEdit,
      isDir: this.showEdit,
      iconType: this.iconName
    }
  },
  methods: {
    handleChange (e) {
      const value = e.target.value
      this.value = value
    },
    check () {
      this.editable = false
      this.$emit('change', this.value)
    },
    closeIpt () {
      this.editable = false
      this.$emit('closeItem', this.value)
    },
    edit () {
      this.editable = true
    },
    clickFileName () {
      this.$emit('clickDJ', this.isDir)
    }
  }
}
</script>
